<template>
  <div class="Major">
    <el-breadcrumb separator="/" style="margin-bottom: 10px">
      <el-breadcrumb-item
        ><el-icon><House /></el-icon
      ></el-breadcrumb-item>
      <el-breadcrumb-item>岗位专业</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <div class="content-title">
        <div style="display: flex">
          <div style="line-height: 28px; margin-right: 5px; font-weight: 550">
            名称:
          </div>
          <div style="margin-left: 20px">
            <el-input style="width: 210px" placeholder="请输入名称"></el-input>
          </div>
        </div>
        <div style="margin-left: 80px">
          <el-button type="primary" :icon="Search">搜索</el-button>
          <el-button :icon="RefreshRight">重置</el-button>
        </div>
      </div>
      <div class="bottom">
        <div
          style="
            border-bottom: 1px solid rgb(189, 191, 190);
            padding-bottom: 20px;
          "
        >
          <el-button @click="addData()" type="primary" :icon="Plus"
            >新增</el-button
          >
          <el-button type="danger" :icon="DeleteFilled">删除</el-button>
        </div>
        <div>
          <el-table height="350px" :data="tableData" style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column label="序号" type="index" width="120" />
            <el-table-column property="account" label="登录名称" />
            <el-table-column property="accountName" label="用户名称" />
            <el-table-column property="createTime" label="创建时间" />
            <el-table-column property="address" label="操作">
              <div style="display: flex">
                <el-button type="primary" link> 编辑 </el-button>
                <div style="margin: 0 10px; color: rgb(218, 218, 218)">|</div>
                <el-button type="primary" link> 删除 </el-button>
              </div>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              background
              v-show="total > 0"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              v-model:page="queryParams.currentPage"
              v-model:limit="queryParams.pageSize"
              class="pagination_bom"
            />
            <!-- @pagination="getList"   -->
          </div>
        </div>
      </div>
    </div>

    <!-- 新增/编辑弹窗 -->
    <el-dialog center v-model="addDialog" :title="addTitle" width="500">
      <el-form :model="form" label-width="80px">
        <el-form-item label="登录名称 :" prop="account">
          <el-input
            v-model="form.account"
            placeholder="请输入登录名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户名称 :" prop="accountName">
          <el-input
            v-model="form.accountName"
            placeholder="请输入用户名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="账号密码 :" prop="pwd">
          <el-input v-model="form.pwd" placeholder="请输入账号密码"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="verifyAdd()" type="primary" style="width: 120px"
            >确认
          </el-button>
          <el-button @click="addDialog = false" style="width: 120px"
            >取消</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="User">
import {
  House,
  Search,
  RefreshRight,
  Plus,
  DeleteFilled,
} from "@element-plus/icons-vue";
import { onMounted, reactive, ref } from "vue";
import { getTable, verifyAddData } from "@/api/user";

const total = ref(1);
const form = ref({
  account: "",
  accountName: "",
  pwd: "",
  token: localStorage.getItem("Token"),
});

const tableData = ref([]);

const queryParams = reactive({
  token: localStorage.getItem("Token"),
  pageNum: 1,
  pageSize: 10,
});

const addTitle = ref("");
const addDialog = ref(false);

// 获取表格数据
async function getTableData() {
  // const token = localStorage.getItem("Token");
  const res = await getTable({
    // token,
  });
  total.value = res.data.length;
  tableData.value = res.data;
}

// 新增按钮操作
function addData() {
  addDialog.value = true;
  addTitle.value = "新增岗位";
}

// 确认新增
async function verifyAdd() {
  const res = verifyAddData(form.value);
  console.log(res, 777888);
}

onMounted(() => {
  getTableData();
});
</script>

<style lang="scss" scoped>
.content {
  background: #fff;
  height: calc(100vh - 148px);

  border-top: 1px solid rgb(189, 191, 190);
  border-right: 1px solid rgb(189, 191, 190);
  border-left: 1px solid rgb(189, 191, 190);

  .content-title {
    display: flex;
    padding: 20px;
    // height: 38px;
    width: 100%;
    border-bottom: 1px solid rgb(189, 191, 190);
    margin-bottom: 20px;
  }

  .bottom {
    padding: 20px;
    border-top: 1px solid rgb(189, 191, 190);
  }
}

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}
</style>
